<template>
    <div class=''>
        <div class="head">
            <Button type="primary" @click="add">新增事件</Button>
        </div>
        <Table stripe border :columns="columns" :data="linkageEvent" v-if="linkageEvent.length > 0" style="margin-top: 20px;">
            <template slot-scope="{ index }" slot="index">
                {{index+1}}
            </template>
            <template slot-scope="{ row, index }" slot="action">
                <Button type="primary" size="small" @click="edit(index)" style="margin-right: 10px;">编辑</Button>
                <Button type="error" size="small" @click="del(index)">删除</Button>
            </template>
        </Table>
        <Alert type="warning" style="margin-top: 20px;" v-else>
            提示
            <span slot="desc">
                没有更多联动事件，请新增。
            </span>
        </Alert>
        <Drawer title="联动事件编辑" :transfer="false" v-model="drawerStatus" v-if="drawerStatus" width="520" :mask-closable="false">
            <i-form :label-width="80">
                <FormItem label="事件标题">
                    <Input type="text" v-model="linkageEvent[editIndex].title" placeholder="请输入事件标题">
                    </Input>
                </FormItem>
                <FormItem label="事件类型">
                    <RadioGroup v-model="linkageEvent[editIndex].type">
                        <Radio label="hide">隐藏事件</Radio>
                        <Radio label="message">提示事件</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="触发对象">
                    <Card v-for="(item,index) in linkageEvent[editIndex].from" :key="index" :title="'对象'+(index+1)" style="margin-bottom: 15px;">
                        <a href="#" slot="extra" @click.prevent="addFrom" v-if="index == 0">
                            增加
                        </a>
                        <a href="#" slot="extra" @click.prevent="delFrom(index)" v-else>
                            <Icon type="md-close" color="#ed4014"></Icon>
                        </a>
                        <i-form>
                            <FormItem label="选择对象">
                                <i-select v-model="linkageEvent[editIndex].from[index]['id']">
                                    <i-option v-for="(v,k) in fromlist" :key="k" :value="v.id">{{ v.name }}</i-option>
                                </i-select>
                            </FormItem>
                            <FormItem label="对象值">
                                <Input type="text" v-model="linkageEvent[editIndex].from[index]['value']" placeholder=""></Input>
                            </FormItem>
                        </i-form>
                    </Card>
                </FormItem>
                <FormItem label="隐藏对象" v-if="linkageEvent[editIndex].type == 'hide'">
                    <Card v-for="(item,index) in linkageEvent[editIndex].obj" :key="index" :title="'对象'+(index+1)" style="margin-bottom: 15px;">
                        <a href="#" slot="extra" @click.prevent="addObj" v-if="index == 0">
                            增加
                        </a>
                        <a href="#" slot="extra" @click.prevent="delObj(index)" v-else>
                            <Icon type="md-close" color="#ed4014"></Icon>
                        </a>
                        <i-form>
                            <FormItem label="选择对象">
                                <i-select v-model="linkageEvent[editIndex].obj[index]['id']">
                                    <i-option v-for="(v,k) in objlist" :key="k" :value="v.id">{{ v.name }}</i-option>
                                </i-select>
                            </FormItem>
                        </i-form>
                    </Card>
                </FormItem>
                <FormItem label="提示类型" v-if="linkageEvent[editIndex].type == 'message'">
                    <RadioGroup v-model="linkageEvent[editIndex].msgEvent">
                        <Radio label="success">成功</Radio>
                        <Radio label="warning">警告</Radio>
                        <Radio label="error">错误</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="提示内容" v-if="linkageEvent[editIndex].type == 'message'">
                    <Input type="textarea" v-model="linkageEvent[editIndex].msg" placeholder="请输入提示内容">
                    </Input>
                </FormItem>
            </i-form>
        </Drawer>
    </div>
</template>
<script>
export default {
    components: {},
    data() {
        //这里存放数据
        return {
            editIndex: 0,
            drawerStatus: false,
            fromlist: [],
            objlist: [],
            columns: [{
                    title: '序号',
                    width: 80,
                    slot: 'index',
                    align: 'center'
                },
                {
                    title: '标题',
                    key: 'title',
                    align: 'center'
                },
                {
                    title: '事件',
                    key: 'type',
                    align: 'center',
                    render: (h, params) => {
                        return h('div', params.row.type == 'hide' ? '隐藏事件' : '弹窗事件');
                    }
                },
                {
                    title: '操作',
                    slot: 'action',
                    align: 'center',
                    width: 150
                }
            ],
        };
    },
    //监听属性 类似于data概念
    computed: {
        linkageEvent: {
            get() {
                return this.$store.state.linkageEvent
            },
            set(val) {
                this.$store.state.linkageEvent = val
            }
        }
    },
    //监控data中的数据变化
    watch: {},
    //方法集合,
    methods: {
        add() {
            this.linkageEvent.push({ title: '自定义事件', type: 'hide', msgEvent: 'success', msg: '', from: [{ id: 0, value: '' }], obj: [{ id: 0 }] })
        },
        del(index) {
            this.linkageEvent.splice(index, 1)
        },
        edit(index) {
            this.editIndex = index
            this.drawerStatus = true
        },
        addFrom() {
            this.linkageEvent[this.editIndex]['from'].push({ id: 0, value: '' })
        },
        addObj() {
            this.linkageEvent[this.editIndex]['obj'].push({ id: 0 })
        },
        delObj(index){
            this.linkageEvent[this.editIndex]['obj'].splice(index,1)
        },
        delFrom(index){
            this.linkageEvent[this.editIndex]['from'].splice(index,1)
        },
        getinit() {
            this.fromlist = this.getfrom(JSON.parse(JSON.stringify(this.$store.state.dataconfig)), '')
            this.objlist = this.getobj(JSON.parse(JSON.stringify(this.$store.state.dataconfig)), '')
        },
        getfrom(array, name) {
            var newarray = []
            for (var i = 0; i < array.length; i++) {
                if (!array[i]['list']) {
                    if (array[i]['type'] == 1) {
                        newarray.push({ 'id': array[i]['id'], 'name': name + array[i]['config']['label'] })
                    }
                } else {
                    newarray = newarray.concat(this.getfrom(array[i]['list'], name + '|-'))
                }
            }
            return newarray
        },
        getobj(array, name) {
            var newarray = []
            for (var i = 0; i < array.length; i++) {
                newarray.push({ 'id': array[i]['id'], 'name': name + array[i]['config']['label'] })
                if (array[i]['list']) {
                    newarray = newarray.concat(this.getobj(array[i]['list'], name + '|-'))
                }
            }
            return newarray
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.getinit()
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    }
}
</script>
<style lang='less' scoped>
</style>